<template>
  <div class="app-container">
    <el-button type="primary" @click="addJob"> 新增 </el-button>
    <el-table
      v-loading="false"
      :data="listData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号"
        type="index">
      </el-table-column>

<!--      <el-table-column align="center" label="ID" width="50px">-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.jobId }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="Job Name">
        <template slot-scope="scope">
          {{ scope.row.jobName }}
        </template>
      </el-table-column>
      <el-table-column label="job Group" >
        <template slot-scope="scope">
          <span>{{ scope.row.jobGroup }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调用方法" >
        <template slot-scope="scope">
          {{ scope.row.invokeTarget }}
        </template>
      </el-table-column>
      <el-table-column label="正则表达式" >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.cronExpression }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="misfirePolicy"  align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.misfirePolicy === '1'">立即执行</el-tag>
          <el-tag v-else-if="scope.row.misfirePolicy === '2'" type="success">执行一次 </el-tag>
          <el-tag v-else type="danger"> 放弃执行</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="status"  align="center" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value = "0"
            inactive-value = "1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleStatusChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"  align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="createBy" width="90" align="center">
        <template slot-scope="scope">
          <el-tag  >{{ scope.row.createBy }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="介绍"  align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="editJob(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteJob(scope.row)"></el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :visible.sync="showEdit" :title="dialogType==='edit'?'编辑':'新增'"  append-to-body>
      <el-form :model="jobEditForm" label-width="120px" label-position="left" :rules="jobSubmitRules">
        <el-input v-model="jobEditForm.jobId" v-show="false" />
        <el-form-item label="jobName" prop="jobName">
          <el-input v-model="jobEditForm.jobName" />
        </el-form-item>
        <el-form-item label="jobGroup" prop="jobGroup">
          <el-input v-model="jobEditForm.jobGroup" />
        </el-form-item>
        <el-form-item label="目标方法" prop="invokeTarget">
          <el-tooltip content="参考格式：com.whai.ebbinghaus.utils.schedule.RefreshMemoryJob.execute()" placement="top-start">
            <el-input v-model="jobEditForm.invokeTarget"  />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="表达式" prop="cronExpression">
          <el-tag>{{jobEditForm.cronExpression}}</el-tag>
          <el-button type="primary" @click="handleShowCron">
            生成表达式
            <i class="el-icon-time el-icon--right"></i>
          </el-button>
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="jobEditForm.status" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="misfirePolicy">
          <el-select v-model="jobEditForm.misfirePolicy" placeholder="请选择">
            <el-option
              v-for="item in misfirePolicyOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍：">
          <el-input v-model="jobEditForm.remark"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="showEdit=false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
      <Crontab  @hide="openCron=false" @fill="crontabFill" :expression="expression"></Crontab>
    </el-dialog>


  </div>
</template>

<script>
import {addJob, changeJobStatus, deleteJobById, jobsList,  updateJob} from "@/api/job";
import {messageAlert} from "@/api/common-alert";
import Crontab from "@/components/Crontab/index.vue";

export default {
  components:{
    Crontab
  },
  name: "job",
  data() {
    return {
      openCron: false,
      /*效验规则*/
      jobSubmitRules: {
        jobName: [
          {required: true, message: '请输入job Name', trigger: 'blur'}
        ],
        jobGroup: [
          {required: true, message: '请输入job Group', trigger: 'blur' }
        ],
        invokeTarget: [
          {required: true, message: '请输入 调用方法', trigger: 'blur' }
        ],
        cronExpression: [
          {required: true, message: '请输入 cron 正则表达式', trigger: 'blur' }
        ]
      },
      statusOptions:[
        {
          key: '0',
          label: '正常使用'
        }, {
          key: '1',
          label: '禁用'
        }
      ],
     misfirePolicyOptions:[
        {
          key: '1',
          label: '立即执行'
        }, {
          key: '2',
          label: '执行一次'
        }, {
         key: '3',
         label: '放弃执行'
        }
      ],
      dialogType: "new",
      showEdit: false,
      listData: [],
      jobEditForm: {
        jobId: '',
        jobName: '',
        jobGroup: '',
        invokeTarget: "",
        cronExpression: "",
        misfirePolicy: "",
        status: "",
        remark: ""
      },
      expression: '',
    }
  },
  created() {
    this.getJobsList();
  },
  methods:{
    /** 确定后回传值 */
    crontabFill(value) {
      this.jobEditForm.cronExpression = value;
    },
    handleShowCron() {
      this.openCron = true;
    },
    getJobsList() {
      jobsList().then(
        res=>{
          this.listData = res.data.data
        }
      )
    },
    editJob(row){
      this.dialogType = 'edit';
      this.showEdit = true;
      this.jobEditForm.jobGroup = row.jobGroup;
      this.jobEditForm.jobId = row.jobId;
      this.jobEditForm.jobName = row.jobName;
      this.jobEditForm.invokeTarget = row.invokeTarget;
      this.jobEditForm.remark = row.remark;
      this.jobEditForm.cronExpression = row.cronExpression;
      this.jobEditForm.status = row.status;
      this.jobEditForm.misfirePolicy = row.misfirePolicy;
    },
    addJob() {
      this.dialogType = 'new';
      this.jobEditForm = {};
      this.showEdit = true;
    },
    submit() {
      const params = {
        jobId: this.jobEditForm.jobId,
        cronExpression: this.jobEditForm.cronExpression ,
        invokeTarget: this.jobEditForm.invokeTarget,
        jobGroup: this.jobEditForm.jobGroup ,
        jobName: this.jobEditForm.jobName ,
        misfirePolicy: this.jobEditForm.misfirePolicy ,
        status: this.jobEditForm.status ,
        remark: this.jobEditForm.remark
      }

      if (this.dialogType === 'new') {
        addJob(params).then(
          res=>{
            messageAlert(this, res.data);
            this.getJobsList();
            this.showEdit = false;
          }
        );
      }else {
        updateJob(params).then( res=>{
          messageAlert(this, res.data);
          this.getJobsList();
          this.showEdit = false;
        })
      }

    },
    deleteJob(row) {
      deleteJobById(row.jobId).then(res=>{

        messageAlert(this, res.data);
        this.getJobsList();
      })
    },
    handleStatusChange(row){
      const params = {
        jobId: row.jobId,
        status: row.status
      }
      //改变执行状态
      changeJobStatus(params).then(
        res=>{
          messageAlert(this, res.data);
          this.getJobsList();
        }
      )
    }
  }
}
</script>

<style scoped>

</style>
